<div id="hot_map" style="width: 973px;height:700px; background:url('img/hongkang.png') no-repeat; background-size:973px 700px; margin: 30px 0px 0px 30px; padding-top: 10px ">

</div>

<script>
    var totalHtml = "<div style='margin: 5px 5px 5px 5px'>"
    var rowNum = 15;
    var columnNum = 21;
    var boxId = 0;
    for (var rowIndex = 0; rowIndex < rowNum; rowIndex++) {
        totalHtml = totalHtml + "<div style=\"margin-top: 2px\">"
        for(var columnIndex = 0; columnIndex < columnNum; columnIndex++) {
            totalHtml = totalHtml + "<div id=box_" + boxId + " style=\"background-color: white; width: 40px; height: 40px; display: inline-block; margin-left: 5px; opacity: 0.5\"></div>"
            boxId++
        }
        totalHtml = totalHtml + "</div>"
    }
    totalHtml = totalHtml + "</div>"
    layui.$("#hot_map").html(totalHtml)
</script>

<script>
    layui.$("#box_130")[0].style.backgroundColor = "red"
</script>